<!-- 赛事报名中 -->
<template>
	<view class="item-block">
		<view class="header">
			<view class="header_item">
				<view class="">
					<view class="name_item">
						{{formobj.raceName}}报名中 <span class="iconfont icon-xiayibu"></span>
					</view>
					<view class="text">
						开始时间 : {{formobj.startTime}}
					</view>
					<view class="text">
						参赛队伍 : {{formobj.joinNum}}/{{formobj.teamNum}}
					</view>
					<view class="address_item">
						<span class="iconfont icon-dizhi"></span>
						<span class="address_text">{{formobj.placeName}}</span>
					</view>
				</view>

				<view class="logo_avatar">
					<view class="avatar">
						<u-avatar :src="formobj.raceLogo" size="70"></u-avatar>
					</view>
				</view>
			</view>
			<view class="bot_style">
			</view>
		</view>
		<view class="information">
			<view class="detail_item">
				<view class="title">
					<view class="">
						比赛介绍
					</view>
					<view class="two" @click="descdetail">
						详情
					</view>
				</view>
				<view class="desc_item">
					<u-parse :content="formobj.raceDesc"></u-parse>
				</view>
			</view>
			<view class="detail_list">
				<view class="title">
					已报名队伍<span class="title_remove">(已有{{formobj.teams.length}}支)</span>
				</view>
				<view class="detail_list_item" v-for="(item,index) in formobj.teams" :key='index'>
					<view class="">
						<u-avatar :src="item.teamLogo" size="30"></u-avatar>
					</view>
					<view class="item_name">
						{{item.teamName}}
					</view>
					<view class="">
						{{item.playerNum}}/4({{item.playerNum>=4?'已报满':'报名中'}})
					</view>
					<view class="">
						<span>{{item.teamType==1?'公开':'私密'}}</span>
						<span class="herf_item" @click="detailpage(item.id)">详情</span>
					</view>
					<view class="img" @click="addteam(item.id,item.teamType,item.playerNum)"
						:style="{ backgroundImage: 'url(' + (item.playerNum>=4?'https://web.ptgolf.net/image/webchat/26.png':(item.teamType == 1 ? 'https://web.ptgolf.net/image/webchat/16.png' : 'https://web.ptgolf.net/image/webchat/15.png')) + ')' }">

					</view>
				</view>
			</view>
		</view>
		<view class="" v-if="formobj.joinNum!=formobj.teamNum">
			<u-button slot="confirmButton" text="创建队伍" type="success" shape="circle" @click="createteam"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<loginpage ref="loginst" @refresh='refreshinfo'></loginpage>
	</view>
</template>

<script>
	import loginpage from '../../pages/layout/login_page.vue'
	export default {
		data() {
			return {
				id: '',
				teamid: '',
				formobj: {
					teams: []
				}
			}
		},
		components: {
			loginpage
		},
		onLoad(options) {
			// 从路由参数中获取传递的值			
			this.id = decodeURIComponent(options.id);
			this.formdetail()

		},
		created() {

		},
		mounted() {

		},
		methods: {
			// 登录回调 3为创建队伍 4为加入队伍
			refreshinfo(e) {
				const that = this
				if (e == 3) {
					setTimeout(function() {
						uni.navigateTo({
							url: `/subpackage1/eventpage/team_create?id=${encodeURIComponent(that.id)}`,
							events: {
								reverseData: (
									data
								) => {
									if (data.data) {
										that.formdetail()
									}
								},

							},

						});
					}, 1000); // 1秒延时
				} else if (e == 4) {
					setTimeout(function() {
							const obj = {
								raceId: that.id,
								teamId: that.teamid
							}
							const objStr = JSON.stringify(obj);
							uni.navigateTo({
								url: '/subpackage1/eventpage/competition_detail?id=' + encodeURIComponent(objStr)
							});
						},
						1000
					); // 1秒延时
				}

			},
			//比赛介绍详情
			descdetail() {
				uni.navigateTo({
					url: '/subpackage1/eventpage/eventdesc_detail?id=' + encodeURIComponent(this.formobj.raceDesc)
				});
			},
			
			// 加入队伍
			addteam(e, type, num) {
				this.teamid = e
				if (num >= 4) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "队伍已满,不可加入",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

					})
					return
				}
				if (type != 1) {
					this.$refs.uToast.show({
						type: 'warning',
						message: "不可加入私密队伍",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/top.png',

					})
					return
				}
				const that = this;
				that.userInfo = uni.getStorageSync('userinfokey')
				if (that.userInfo.token) {
					const obj = {
						raceId: that.id,
						teamId: that.teamid
					}
					const objStr = JSON.stringify(obj);
					uni.navigateTo({
						url: '/subpackage1/eventpage/competition_detail?id=' + encodeURIComponent(objStr)
					});
					return;
				}
				//用户未登录提示用户登录,然后通过登录回调跳转页面
				uni.showModal({
					title: '登录提示',
					content: '您还未登录,点击确定前往登录体验更过功能!!!',
					success: function(res) {
						if (res.confirm) {
							that.$refs.loginst.login(4)
						} else if (res.cancel) {
							return

						}
					}
				});

			},
			// 创建队伍
			createteam() {
				const that = this;
				that.userInfo = uni.getStorageSync('userinfokey')
				if (that.userInfo.token) {
					uni.navigateTo({
						url: `/subpackage1/eventpage/team_create?id=${encodeURIComponent(that.id)}`,
						events: {
							reverseData: (data) => {
								if (data.data) {
									that.formdetail()
								}
							},

						},

					});
					return;
				}
				uni.showModal({
					title: '登录提示',
					content: '您还未登录,点击确定前往登录体验更过功能!!!',
					success: function(res) {
						if (res.confirm) {
							that.$refs.loginst.login(3)

						} else if (res.cancel) {
							uni.reLaunch({
								url: '/pages/homepage/homepage'
							});

						}
					}
				});

			},
			// 表单详情
			formdetail() {
				const that = this
				this.$request(`/race/signDetail/${this.id}`, 'get')
					.then(
						res => {
							that.formobj = res.data.data
							that.formobj.teams = that.formobj.teams ? that.formobj.teams : []
						})
			},
		   // 队伍详情
			detailpage(e) {
				const obj = {
					raceId: this.id,
					teamId: e
				}
				const objStr = JSON.stringify(obj);
				uni.navigateTo({
					url: '/subpackage1/eventpage/team_detail?id=' + encodeURIComponent(objStr)
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.item-block {

		.header {
			background-color: #1e1e1e;
			height: 360rpx;
			background-image: url('https://web.ptgolf.net/image/webchat/14.png');
			background-size: 100% 100%;

			.bot_style {
				margin-top: 40rpx;
				height: 63rpx;
				border-radius: 40rpx 40rpx 0 0;
				background-color: #fff;
			}

			.header_item {
				padding: 0 40rpx 0 40rpx;
				height: 260rpx;
				display: flex;
				align-items: flex-end;
				justify-content: space-between;

				.logo_avatar {
					display: flex;
					align-items: center;
					padding-bottom: 40rpx;

					.avatar {
						height: 140rpx;
						width: 140rpx;
					}


				}

				.text {
					margin-top: 20rpx;
					color: #fff;
					font-size: 24rpx;
				}

				.address_item {
					margin-top: 30rpx;

					.icon-dizhi {
						font-size: 20rpx;
						border-radius: 20rpx;
						padding: 4rpx;
						background-color: #de3600;
						color: #fff;
						margin-right: 6rpx;
					}

					.address_text {
						color: #fff;
						font-size: 24rpx;

					}
				}

				.name_item {
					margin-bottom: 40rpx;
					font-weight: 600;
					font-size: 32rpx;
					color: #fff;

					.iconfont {
						font-size: 26rpx;
						margin-left: 10rpx;
						background-image: linear-gradient(to right, #fff, #5a5a5a);
						/* 渐变颜色 */
						-webkit-background-clip: text;
						/* 让背景渐变显示在文字上 */
						color: transparent;
						/* 文字本身设为透明，这样才会显示渐变效果 */
					}
				}


			}
		}

		.information {
			padding: 0 40rpx;

			.detail_item {
				color: #000;
				font-size: 26rpx;

				.desc_item {
					max-height: 600rpx;
					overflow: auto;
				}

				.title {
					display: flex;
					justify-content: space-between;
					font-size: 34rpx;
					font-weight: 600;

					.two {
						font-weight: 500;
						font-size: 30rpx;
						color: #5c79f6;
					}
				}
			}

			.detail_list .detail_list_item:nth-child(2n) {
				background-color: #f4f4f4;
			}

			.detail_list {
				margin-top: 40rpx;

				.title {
					font-size: 34rpx;
					font-weight: 600;
					margin-bottom: 20rpx;

					.title_remove {
						margin-left: 10rpx;
						font-size: 24rpx;
						color: #de3600;
					}
				}



				.detail_list_item {
					padding: 16rpx 30rpx;
					display: flex;
					border-radius: 16rpx;
					align-items: center;
					font-size: 25rpx;
					justify-content: space-between;

					.img {
						height: 30rpx;
						width: 90rpx;
						background-size: 100% 100%;
					}

					.item_name {
						width: 20%;
						/* 设置宽度 */
						white-space: nowrap;
						/* 防止文字换行 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						/* 使用省略号表示超出部分 */
					}

					.herf_item {
						margin-left: 6rpx;
						color: #5c79f6;
						text-decoration: underline;
					}
				}
			}
		}

		::v-deep .u-button {
			margin-top: 40rpx;
			background-color: #de3600 !important;
			border: 0rpx !important;
			width: 300rpx;
		}
	}
</style>